<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">组织机构</div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :zNodes="zNodes" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="权限列表"
            rowKey="roomId"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :small="true"
            v-if="orgUnitIDs.length"
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
              <el-button type="primary" text :icon="Edit" @click="dialogVisible = true">修改用户权限</el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
    </div>
    <EmployeeDialog
      :dialogVisible="dialogVisible"
      :handleClose="handleClose"
      :submitCallback="_submitEmployee"
      :zNodes="zNodes"
    />
  </div>
</template>

<script setup lang="tsx" name="electronMap">
/* eslint-disable */
// @ts-nocheck
import { ref, onMounted } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import EmployeeDialog from "./components/EmployeeDialog.vue";
import { Edit } from "@element-plus/icons-vue";
import { getOrgTree } from "@/api/modules/common";
import { getAuthDelayList, updateValidity } from "@/api/modules/accessControl/manage/authDelay";
import { ElMessage, ElMessageBox, UploadRequestOptions } from "element-plus";

const treeId = ref("tree");
const dialogVisible = ref(false);
const loading = ref(false);
const zNodes = ref([]);
const orgUnitIDs = ref([]);
const curTreeNode = ref("");

const columns = [
  {
    prop: "empid",
    label: "职工编号",
    minWidth: 120
  },
  {
    prop: "empname",
    label: "姓名",
    minWidth: 120
  },
  {
    prop: "dptName",
    label: "部门",
    minWidth: 200
  }
];

const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getAuthDelayList({ ...newParams, orgUnitIDs: orgUnitIDs.value });
};

const handleClose = () => {
  dialogVisible.value = false;
};

const _submitEmployee = async (ids, datetime) => {
  try {
    const res = await updateValidity({ dateParam1: datetime, list: ids });
    ElMessage.success(res.data);
    dialogVisible.value = false;
    proTable.value.reset();
  } catch (error) {
    console.log(error);
  }
};

/**
 * 获取组织树结构
 */
const getOrgTreeData = async () => {
  try {
    const res = await getOrgTree();
    zNodes.value = res.data;
  } catch (error) {
    console.log(error);
  }
};

/**
 * 点击树节点
 */
function zTreeOnClick({ ids }) {
  orgUnitIDs.value = ids;
  proTable.value && proTable.value.getTableList();
}

onMounted(() => {
  getOrgTreeData();
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
